<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>换图式轮播</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		img{
			display: block;
			margin:0 auto;
		}
		span{
			width: 30px;
			height: 30px;
			background-color: yellow;
			position:absolute;
			display:block;
			top:68px;
			left:447px;
			font-size: 20px;
			text-align: center;
			line-height: 30px;
			opacity:.5;

		}
		.right{
			left:715px;
		}
		.tab{
			position:absolute;
			top:209px;
			left:536px;
		}
		.tab li{
			width: 30px;
			height: 30px;
			background-color: yellow;
			list-style:none;
			text-align: center;
			line-height: 30px;
			float:left;
			margin-right:5px;
		}
		.tab .active{
			background-color: red;
		}
	</style>
</head>
<body>
	<img src="images/1.jpg" alt="" class="pic">
	<span class="left">&lt;</span>
	<span class="right">&gt;</span>
	<ul class="tab">
		<li class="active">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>
	<script>
	var arr=["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg"]
	var index=0;
	var pic=document.querySelector(".pic")
	var left=document.querySelector(".left")
	var right=document.querySelector(".right")
	var tab=document.querySelector(".tab")
	var tablis=tab.getElementsByTagName('li')
	//图片的自动滚动
		function change(){
			if(index==3){
				index=0;
			}else{
				index++
			}
			pic.src=arr[index]
			for(var j=0;j<tablis.length;j++){
				tablis[j].className=""
			}
			tablis[index].className="active"
		}
		var t=setInterval(change,1000)
		//进入图片时，图片自动轮播停止
		pic.onmouseenter=function(){
			clearInterval(t)
		}
		pic.onmouseleave=function(){
			t=setInterval(change,1000)
		}
		//左右按钮的添加
		left.onmouseenter=function(){
			clearInterval(t)
		}
		left.onmouseleave=function(){
			t=setInterval(change,1000)
		}
		right.onmouseenter=function(){
			clearInterval(t)
		}
		right.onmouseleave=function(){
			t=setInterval(change,1000)
		}
		left.onclick=function(){
			if(index==0){
				index=3;
			}else{
				index--;
			}
			pic.src=arr[index]
			for(var j=0;j<tablis.length;j++){
				tablis[j].className=""
			}
			tablis[index].className="active"
		}
		right.onclick=change;
		//导航条的添加
		tab.onmouseenter=function(){
			clearInterval(t)
		}
		tab.onmouseleave=function(){
			t=setInterval(change,1000)
		}
		for(var n=0;n<tablis.length;n++){
			tablis[n].index=n;
			tablis[n].onmouseenter=function(){
				for(var j=0;j<tablis.length;j++){
					tablis[j].className=""
				}
				this.className="active"
				index=this.index;
				pic.src=arr[index]
			}
		}
	</script>	
</body>
</html>